<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>EaselJS Example: Using Sprite</title>

    <link href="assets/demoStyles.css" rel="stylesheet" type="text/css"/>

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

    <!-- We also provide hosted minified versions of all CreateJS libraries.
      http://code.createjs.com -->

    <script>
        var canvas;
        var stage;

        var imgSeq = new Image();        // The image for the sparkle animation
        var sprite;                        // The animated sparkle template to clone
        var fpsLabel;

        function init() {
            // create a new stage and point it at our canvas:
            canvas = document.getElementById("testCanvas");
            stage = new createjs.Stage(canvas);
            // attach mouse handlers directly to the source canvas.
            // better than calling from canvas tag for cross browser compatibility:
            stage.addEventListener("stagemousemove", moveCanvas);
            stage.addEventListener("stagemousedown", clickCanvas);

            // define simple sprite sheet data specifying the image(s) to use, the size of the frames,
            // and the registration point of the frame
            // it will auto-calculate the number of frames from the image dimensions and loop them
            var data = {
                images:["assets/sparkle_21x23.png"],
                frames:{width:21, height:23, regX:10, regY:11}
            }

            // set up an animation instance, which we will clone
            sprite = new createjs.Sprite(new createjs.SpriteSheet(data));

            // add a text object to output the current FPS:
            fpsLabel = new createjs.Text("-- fps", "bold 14px Arial", "#FFF");
            stage.addChild(fpsLabel);
            fpsLabel.x = 10;
            fpsLabel.y = 20;

            // start the tick and point it at the window so we can do some work before updating the stage:
            createjs.Ticker.setFPS(20);
            createjs.Ticker.addEventListener("tick", tick);
        }


        function tick(event) {
            // loop through all of the active sparkles on stage:
            var l = stage.getNumChildren();
            for(var i = l - 1; i > 0; i--) {
                var sparkle = stage.getChildAt(i);

                // apply gravity and friction
                sparkle.vY += 2;
                sparkle.vX *= 0.98;

                // update position, scale, and alpha:
                sparkle.x += sparkle.vX;
                sparkle.y += sparkle.vY;
                sparkle.scaleX = sparkle.scaleY = sparkle.scaleX + sparkle.vS;
                sparkle.alpha += sparkle.vA;

                //remove sparkles that are off screen or not invisble
                if (sparkle.alpha <= 0 || sparkle.y > canvas.height) {
                    stage.removeChildAt(i);
                }
            }

            fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";

            // draw the updates to stage
            stage.update(event);
        }

        //sparkle explosion
        function clickCanvas(evt) {
            addSparkles(Math.random() * 200 + 100 | 0, stage.mouseX, stage.mouseY, 2);
        }

        //sparkle trail
        function moveCanvas(evt) {
            addSparkles(Math.random() * 2 + 1 | 0, stage.mouseX, stage.mouseY, 1);
        }

        function addSparkles(count, x, y, speed) {
            //create the specified number of sparkles
            for(var i = 0; i < count; i++) {
                // clone the original sparkle, so we don't need to set shared properties:
                var sparkle = sprite.clone();

                // set display properties:
                sparkle.x = x;
                sparkle.y = y;
                //sparkle.rotation = Math.random()*360;
                sparkle.alpha = Math.random() * 0.5 + 0.5;
                sparkle.scaleX = sparkle.scaleY = Math.random() + 0.3;

                // set up velocities:
                var a = Math.PI * 2 * Math.random();
                var v = (Math.random() - 0.5) * 30 * speed;
                sparkle.vX = Math.cos(a) * v;
                sparkle.vY = Math.sin(a) * v;
                sparkle.vS = (Math.random() - 0.5) * 0.2; // scale
                sparkle.vA = -Math.random() * 0.05 - 0.01; // alpha

                // start the animation on a random frame:
                sparkle.gotoAndPlay(Math.random() * sparkle.spriteSheet.getNumFrames());

                // add to the display list:
                stage.addChild(sparkle);
            }
        }

    </script>
</head>

<body onload="init();">

<header id="header" class="EaselJS">
    <h1><span class="text-product">Easel<strong>JS</strong></span> Sparkles Demo</h1>

    <p>Example showing how to use simple animated <strong>Sprite</strong> elements. Move your mouse and click
        on the canvas. It also demonstrates displaying the current measured framerate with <strong>Ticker.getMeasuredFramerate()</strong>
        and <strong>Text</strong>. Click repeatedly to generate lots of sparkles and slow down the framerate.<br/>
    </p>
</header>

<div class="canvasHolder">
    <canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
